// @ts-check
import React, { useCallback, useState } from 'react'
import { parseTime } from '../../utils'
import styles from './style.less'

/** @type {React.FC<import('./type').ProgressProps>} */
const Progress = ({
  currentTime,
  playProgress,
  duration,
  onSetProgress = () => {},
  onDragProgress = () => {}
}) => {
  const [dragDistance, setDragDistance] = useState(0)
  /** @type { [HTMLDivElement | null, import('react').Dispatch<HTMLDivElement | null>] } */
  const [progressFullRef, setProgressFullRef] = useState(null)
  /** @type { [HTMLDivElement | null, import('react').Dispatch<HTMLDivElement | null>] } */
  const [progressRef, setProgressRef] = useState(null)
  const getProgressFullRef = useCallback((ref) => setProgressFullRef(ref), [])
  const getProgressRef = useCallback(ref => setProgressRef(ref), [])

  // 是否是在拖拽
  const [isDrag, setIsDrag] = useState(false)
  // 进度条
  const onProgressMouseDown = useCallback((e) => {
    const clickDownX = e.clientX 
    const offsetX = clickDownX - progressFullRef.offsetLeft <= 0 ? 0 : clickDownX - progressFullRef.offsetLeft
    /**
     *    offsetX               
     * __________________  =  progress
     * progressFullWidth      
     */
    const progress = (offsetX <= 0 ? 0 : offsetX) / progressFullRef.offsetWidth
    onSetProgress(progress)
    e.currentTarget.onmousemove = (e) => {
      // 防止超出
      const moveX = e.clientX > (progressFullRef.offsetLeft + progressFullRef.offsetWidth) ? progressFullRef.offsetLeft + progressFullRef.offsetWidth : e.clientX
      // 防止轻微移动
      if(Math.abs(clickDownX - moveX) >= 5) {
        setIsDrag(true)
        const offsetX = moveX - progressFullRef.offsetLeft <= 0 ? 0 : moveX - progressFullRef.offsetLeft
        const progress = (offsetX <= 0 ? 0 : offsetX) / progressFullRef.offsetWidth
        console.log()
        setDragDistance(progress)
        onDragProgress(progress)
      }
    }
  }, [progressFullRef, progressRef])

  const onProgressMouseUp = useCallback((e) => {
    const {
      currentTarget,
    } = e
    currentTarget.onmousemove = null
    if(isDrag) {
      onDragProgress(dragDistance, true)
      setIsDrag(false)
    }
  }, [dragDistance, isDrag])

  const onProgressMouseLeave = useCallback((e) => {
    const {
      currentTarget,
    } = e
    currentTarget.onmousemove = null
    if(isDrag) {
      onDragProgress(dragDistance, true)
      setIsDrag(false)
    }
  }, [dragDistance, isDrag])
  return (
    <div className = {styles['progress']}>
      <div className ={styles['currentTime']}>{ parseTime(currentTime) }</div>
      <div className = {styles['progressFull']}
        ref = {ref => getProgressFullRef(ref)}
        onMouseLeave = { onProgressMouseLeave }
        onMouseDown = { onProgressMouseDown }
        onMouseUp = { onProgressMouseUp }
      >
        <div 
          ref = {ref => getProgressRef(ref)}
          className = {styles['progressStep']} 
          style = {{width: `${ playProgress }%`}}>
          <div className = {styles['dot']}></div>
        </div>
      </div>
      <div className ={styles['totalTime']}>{duration}</div>
    </div>
  )
}

export default Progress
